<template>
<div>
  <van-nav-bar
    title="正在拼团"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="pTlist">
    <div class="pls0">
      <div class="pls1">
        <img src="../../assets/timg.jpg" alt="">
      </div>
      <span>sahjdjdsajio</span>
    </div>
    <div class="plstim">
      <span>还差 <b>3</b> 人成团</span>
      <span>剩余:23:59:59</span>
    </div>
    <div @click="pinT" class="plsQ">去拼团</div>
  </div>
  <!-- 拼团弹窗 -->
  <van-dialog
    v-model="show"
    :title="titleS"
    show-cancel-button
    @confirm="goToX"
  >
    <div class="tPin">
      <span>仅剩 <b style="color:#cc0095;">{{dataP.rest_num}}</b> 个名额</span>
      <span>此团将于 23:59:59 后结束</span>
      <div class="tPimg">
        <span class="tigsp1">
          <img :src="imgS" alt="">
          <span>团长</span>
        </span>
        <span>
          <img src="../../assets/tuo-01.png" alt="">
        </span>
        <span>
          ？
        </span>
      </div>
    </div>
  </van-dialog>
</div>
</template>

<script>
import request from '../../../static/request.js'
export default {
  name: 'Group-list',
  data () {
    return {
      show: false,  // 拼团弹窗显示/否
      titleS:'参与科克拉拉面的拼团',    // 标题
      pTid:0,   // 当前团的团id
      dataP:[],   // 拼团详情
      imgS:'',    // 团长
    }
  },
  created(){
    this.getinfo(); // 拼团列表数据
  },
  methods:{
    // 拼团列表数据
    getinfo(){
      request({
        url: '?controller=theapi3&action=getAssembles',
        method: 'get',
        params: {
          gid:2,
          page:1,
          pagesize:20
        }
      }).then(res=>{
        console.log(res)
      })
    },
    // 返回
    onClickLeft(){
      this.$router.go(-1)
    },
    // 拼团弹窗
    pinT(){
      this.show = true;
      this.pTid = 0;  // 获取团id
      this.getTuan(); // 拼团详情
    },
    // 确认拼团
    goToX(e){   // e 当前团的团id
      this.$router.push({
        name:'Group-details',
        params:{
          tChan: true,
          tuaId: this.pTid
        }
      })
    },
    // 获取拼团详情
    getTuan(){
      request({
        url: '?controller=theapi3&action=assemblesDetail',
        method: 'get',
        params: {
          aid:1,
        }
      }).then(res=>{
        this.dataP = res.data.data;
        if(this.dataP.users[0].is_first == 1){
          this.imgS = this.dataP.users[0].head_ico;
        }
      })
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pTlist{
  width: 100%;
  padding: 0.1rem 0;
  border-bottom: 0.01rem solid #e4e4e4;
  display: flex;
  justify-content: space-around;
  font-size: 0.25rem;
}
.pls1{
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  overflow: hidden;
}
.pls0,.plstim{
  display: flex;
}
.plstim{
  flex-direction: column;
}
.plstim span:nth-child(1) b{
  color: #cc3366;
}
.pls1 img{
  width: 100%;
  height: 100%;
}
.plsQ{
  width: 1.3rem;
  height: 0.6rem;
  border-radius: 0.1rem;
  background: #cc3366;
  text-align: center;
  line-height: 0.6rem;
  color: #fff;
}
.tPin{
  margin: 0.2rem 0;
  margin-bottom: 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.tPimg{
  display: flex;
  justify-content: center;
}
.tPimg span{
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border:0.01rem solid #fea4d1;
  margin-right: 0.2rem;
  margin-top: 0.2rem;
  text-align: center;
  line-height: 0.8rem;
}
.tPimg span:nth-last-child(1){
  margin-right: 0rem;
}
.tigsp1{
  position: relative;
}
.tigsp1>span{
  position: absolute;
  width: 0.8rem;
  height: 0.35rem;
  border-radius: 0.15rem;
  bottom: -0.175rem;
  left: 0;
  background: #fdccea;
  line-height: 0.3rem;
  color: #fe5e49;
  text-align: center;
}
.tPimg span img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
</style>
